<template>
    <div v-dialogdrag="isDrag">
        <el-dialog
            v-model="modal"
            v-bind="$attrs"
            :center="center"
            :width="width"
            :fullscreen="dialogFull"
            :close-on-click-modal="otherClose"
            :destroy-on-close="destroyClose"
        >
            <template #header>
                {{ title }}
                <div class="fullScreen" title="全屏" @click="fullscreenChange">
                    <el-icon><FullScreen /></el-icon>
                </div>
            </template>
            <slot />
            <template v-if="$slots.nFooter" #footer>
                <slot name="nFooter" />
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { FullScreen } from '@element-plus/icons-vue'
import { ref,defineProps,onDeactivated,defineExpose } from 'vue'
const props = defineProps({
    destroyClose: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: 'title'
    },
    otherClose: {
        type: Boolean,
        default: false
    },
    width: {
        type: String
    },
    center: {
        type: Boolean,
        default: false
    },
    // 是否可拖动
    isDrag: {
        type: Boolean,
        default: true
    }
})
const modal = ref(false)
const dialogFull = ref(false)
function open() {
    modal.value = true
}
function close() {
    modal.value = false
}
function fullscreenChange() {
    dialogFull.value = !dialogFull.value
    let dragDom = document.querySelector('.el-dialog')
    dragDom.style.cssText += `;left:${0}px;top:${0}px;`
}
onDeactivated(() => {
    close()
})
// 使用<script setup>的组件默认是关闭的，即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑。
// 要解决这个问题很简单，只需要在被调用的子组件中，通过defineExpose暴露对应的函数、属性即可。如下：
defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
    :deep(.el-overlay-dialog) {
        .el-dialog {
            border-radius: 10px;
            .el-dialog__header {
                // border-bottom: 1px solid #ededed;
                padding: 15px 20px;

            }
            .icon{
                color: #333;
            }
            .fullScreen {
                position: absolute;
                top: 6px;
                right: 54px;
                width: 54px;
                height: 54px;
                color: #333;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .el-dialog__body {
                padding: 40px 20px;
            }
        }
    }
</style>
